<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本相关</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../js/lib/bootstrap/dist/css/bootstrap.min.css">
  <style>
    body {
      font-family: Georgia, serif;
    }
    h1 {
      color: crimson;
    }  
  </style>
</head>
<body>

	<div class="container">
    <h1>文本对齐方式</h1>
    <pre>
      1. .text-left: 左对齐
      2. .text-right: 右对齐
      3. .text-center: 居中对齐
      4. .text-justify: 分散对齐(单行无效！)
    </pre>
    <h2>
      <p class="text-left">.text-left: 左对齐</p>
      <p class="text-center">.text-center: 居中对齐</p>
      <p class="text-right">.text-right: 右对齐</p>
      <p class="text-justify">.text-justify: 分散对齐(单行)</p>
      <p class="text-justify">.text-justify: 分散对齐(多行) There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p>
    </h2>
  </div>  
  
  <div class="container">
    <h1>文本浮动方式</h1>
    <pre>
      1. .pull-left: 左浮动
      2. .pull-right: 右浮动
      3. .center-block: 居中
    </pre>
    <h2>
      <p class="pull-left">.pull-left: 左浮动</p>
      <p class="pull-right">.pull-right: 右浮动</p>
      <p class="center-block" style="width:260px;clear:both;">.center-block: 居中</p>
    </h2>
  </div>    
      
  <div class="container">
    <h1>英文大小写</h1>
    <pre>
      1. .text-lowercase: 小写
      2. .text-uppercase: 大写
      3. .text-capitalize: 首字母大写
    </pre>
    <h2>
      <p class="text-lowercase">全小写: .Text-Lowercase</p>
      <p class="text-uppercase">全大写: .Text-Uppercase</p>
      <p class="text-capitalize">首字母大写: .text-capitalize</p>
    </h2>
  </div>  
      
  <div class="container">
    <h1>文本颜色</h1>
    <pre>
      1. .text-muted: 减弱
      2. .text-primary: 默认颜色
      3. .text-success: 成功颜色
      4. .text-info: 提示信息颜色
      5. .text-warning: 警告颜色
      6. .text-danger: 危险颜色
    </pre>
    <h2>
      <p class="text-muted">.text-muted: 文本颜色是减弱的</p>
      <p class="text-primary">.text-primary: 默认颜色</p>
      <p class="text-success">.text-success: 成功颜色</p>
      <p class="text-info">.text-info: 提示信息颜色</p>
      <p class="text-warning">.text-warning: 警告颜色</p>
      <p class="text-danger">.text-danger: 危险颜色</p>
    </h2>
  </div>
        
  <script src="../../js/lib/jquery/dist/jquery.min.js"></script>
  <script src="../../js/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>